<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 计时器的问题:
    // 计时器嵌套计时器 => 两个计时器是独立的,  外层计时器不会等待内层计时器执行完毕,再启动下一次

    // 每隔5s, 启动5s的倒计时 (外层倒计时刚好等内层倒计时结束,又执行了一次)
    // var timer = setInterval(function(){
    //     var count = 5;
    //     console.log(count);
    //     var timer1 = setInterval(function(){
    //         count--;
    //         console.log(count);
    //         if(count == 1){
    //             console.log("倒计时结束");
    //             clearInterval(timer1);
    //         }
    //     },1000);
    // },5000);


    // 每隔2s, 启动5s的倒计时  => 问题: 外层计时器不会等待内层计时器执行完毕,再启动下一次 => 而是直接间隔2s启动新的
    // var timer = setInterval(function(){ // 
    //     var count = 5;
    //     console.log(count);
    //     var timer1 = setInterval(function(){
    //         count--;
    //         console.log(count);
    //         if(count == 1){
    //             console.log("倒计时结束");
    //             clearInterval(timer1);
    //         }
    //     },1000);
    // },2000);



    // 延时器改计时器 => 递归
    // 延时器改计时器如何停止 => 记录延时器编号,对应编号清除(延时器不在执行,函数也不会再递归)
    // var timer = null;
    // function fn(){  // 立即执行一次 
    //     console.log(11111);  
    //     timer = setTimeout(fn,1000); // 每隔1s再次执行
    // }
    // fn();

    // document.onclick = function(){
    //     clearTimeout(timer);
    // }




    // 每隔2s, 启动5s的倒计时  =>  每隔2s, 启动5s的倒计时

    var timer = null;
    function fn() {
        timer = setTimeout(function () { // 先延迟2s执行内容, 倒计时结束再递归(先延迟2s执行内容, 倒计时结束再递归)   
            console.log("延迟2s,启动5s倒计时");
            var count = 5;
            console.log(count);
            var timer1 = setInterval(function () {
                count--;
                console.log(count);
                if (count == 1) {
                    console.log("倒计时结束");
                    clearInterval(timer1);
                    fn();
                }
            }, 1000);

        }, 2000)
    }

    fn();

</script>

</html>